.container {
    height: calc(100vh - 64px - 75px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url(../imgs/bannerbg.png);
    background-position: center;
    background-size: 100% 100%;
    .bigTitle {
        text-align: center;
        span:not(:first-child) {
            margin-left: 20px;         
        }
        span {
            font-size: 50px;
            display:inline-block;
            color: white;
            font-weight: 700;
            animation: spread 1s ease-in-out infinite alternate;
         
        }
    }

    .text {
        color: white;
        font-size: 17px;
    }

    .buttons {
        display: flex;
        width: 100%;
        justify-content: center;

        button:first-child {
            background-color: white;
            color: #1f6fff;
            font-weight: 800;
            border: 2px solid 1f6fff;
        }

        button:not(:first-child) {
            margin-left: 10px;
            background-color: transparent;
            color: white;
            border: 2px solid white;
            display: flex;
            align-items: center;
            font-weight: 800;
        }
    }
}


@keyframes spread {
    to {
        background-image: linear-gradient(120deg, #073fa5 0%, #1f6fff 100%);
        -webkit-background-clip: text;
        color: transparent;
        transform: translate(10px,-25px);
        //text-shadow: #1f8eee 0px 4px 12px;
    }
}

@for $i from 1 through 8 {
    .bigTitle>span:nth-child(#{$i}) {
        animation-delay: ($i - 1) * 0.2s;   
          
    }
}